<template>
	<view class="conten">

		<!-- 		<template v-if="show">
			<view>
				<canvas canvas-id="waterMark" class="waterMark"
					:style="{width:windowWidth+'px',height:windowHeight+'px'}"></canvas>
				<image :src="waterMarkUrl" class="waterMark-bg"
					:style="{width:windowWidth+'px',height:windowHeight+'px'}">
				</image>
			</view>
		</template> -->
		<template>
			<view class="waterMark-bg">
				<view class="canndasd" :style="{'width':windowWidth +'px','height':windowHeight + 'px'}">
					<view class="adsadasf-56">
						<view class="clasds" v-for="(item,index) of  arrPhone.slice(0,20)" :key="index">
							<text class="text-56"> {{item.phone}}</text>
						</view>
					</view>
					<view class="contane">
						<view class="clasds" v-for="(item,index) of  arrPhone.slice(0,10)" :key="index">
							<text class="text-56"> {{item.phone}}</text>
						</view>
					</view>
					<view class="contane-6">
						<view class="clasds" v-for="(item,index) of  arrPhone.slice(0,10)" :key="index">
							<text class="text-56"> {{item.phone}}</text>
						</view>
					</view>

				</view>
			</view>
		</template>


	</view>
</template>

<script>
	export default {
		name: "waterMark",
		props: {
			waterMarkName: {
				type: String,
				default: () => ''

			}
		},
		data() {
			return {
				waterMarkUrl: "",
				windowWidth: 100,
				windowHeight: 100,
				_waterMarkName: '',
				arrPhone: [],
				show: true
			};
		},
		mounted() {
			let value = null;
			// #ifdef MP-WEIXIN
			value = uni.getStorageSync('userInfo');
			// #endif
			// #ifdef H5
			value = {
				contactorName: '',
				phone: ""
			};
			// #endif
			// debugger
			// this.show  = true
			value = uni.getStorageSync('phone')
			if (value) {
				this._waterMarkName = value;
				// if (this.show) {
				this.drawWaterMark(this._waterMarkName);
				// } else {

				// }
				this.arrPhone = this.handlerData()


			}

		},
		methods: {
			handlerData() {
				let arr = []
				for (let i = 0; i < 30; i++) {
					arr.push({
						phone: this._waterMarkName
					})
				}
				// console.log(arr)
				return arr

			},
			drawWaterMark(text) {
				const canvas = uni && uni.createCanvasContext("waterMark", this);

				this.getDeviceInfo().then((response) => {
					const w = response.windowWidth;
					const h = response.screenHeight;
					console.log({
						response: response,
						'w': w,
						'h': h
					})
					this.windowWidth = w;
					this.windowHeight = h;
					//创建canvas绘制上下文

					canvas.clearRect(0, 0, w, h)
					//开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。
					canvas.beginPath();
					canvas.setFontSize(16);
					canvas.setFillStyle('rgba(0, 0, 0, 0.1)');
					canvas.rotate(-30 * Math.PI / 180)
					if (text) text = this.trim(text);
					const maxWidth = text.length * 18;
					for (let x = 0; x < 12; x++) {
						for (let y = 0; y < 40; y++) {
							canvas.fillText(text, (maxWidth + 20) * x - 800, 50 * y + 20);
						}
					}

					// setTimeout(() => {}, 500)
					//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
					canvas.draw(false, () => {
						//把当前画布指定区域的内容导出生成指定大小的图片
						uni.canvasToTempFilePath({
							canvasId: "waterMark",
							complete: (res) => {
								this.waterMarkUrl = res.tempFilePath
							}
						}, this)
					})


				}).catch(err => {
					this.show = false
				});
			},
			trim(str) {
				console.log(str, "-12112-")
				let trimStr = '',
					reg = /[\t\r\f\n\s]*/g;
				if (typeof str === 'string') trimStr = str.replace(reg, '');

				return trimStr
			},
			/**
			 * 获取当前设备的信息
			 * **/
			getDeviceInfo() {
				return new Promise((resolve, reject) => {
					uni && uni.getSystemInfo({
						success: (sysInfo) => {
							resolve(sysInfo)
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.waterMark {
		width: 100%;
		height: 100%;
		position: fixed;
		transform: translate(-100%, -100%);
		pointer-events: none;
		opacity: 0;

	}

	.conten{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		pointer-events: none;
		.waterMark-bg  {
			width: 100%;
			height: 100%;
		}

		// transform: translate(108rpx, 58rpx);
		.canndasd {

			// display: flex;
			// flex-wrap: wrap;
			// transform: rotate(-18deg);
			// color: rgba(0, 0, 0, 0.1);
			position: relative;

			.adsadasf-56 {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				transform: rotate3d(3.5, 1, 1, -45deg);
			}

			.contane-6 {
				position: absolute;
			    top: -250rpx;
			    right: 96rpx;
				transform: rotate3d(3.5, 1, 1, -45deg);
			}

			.contane {
				position: absolute;
				top: 348rpx;
				// border: 2rpx solid;
				left: 54rpx;
				transform: rotate3d(3.5, 1, 1, -45deg);
			}
		}

		.clasds {
			// display: flex;
			// margin-left: 36rpx;
			// border: 2rpx  solid   red;
			font-size: 32rpx;
			margin-top: 100rpx;

			color: rgba(0, 0, 0, 0.1);

			.text-56 {}
		}

		.clasds+.clasds {}
	}
</style>